/*
 * commision detail
**/
<template>
<div class="weui-tab" v-show="isshow">
	<div class="weui-tab__panel">
		<div class="pic-box">
		  <img :src="goodData.imgOri" alt="" />
		  <div class="shadow"></div>
		</div>
		<div class="weui-media-box">
			<h4 class="weui-media-box__title ptitle">佣金 {{goodData.fanliScore}}积分</h4>
			<p class="weui-media-box__desc desc">佣金有效期 {{goodData.startTime | time-}} 至 {{goodData.endTime | time-}}</p>
		</div>
		<div class="weui-panel">
			<div class="weui-media-box">
				<h4 class="weui-media-box__title name">{{goodData.title}}</h4>
				<div class="weui-media-box__desc prize-box">
					<span class="pbox-n">￥<span class="prize">{{goodData.price}}</span></span>
	        		<span class="pbox-o">￥<span class="prize">{{goodData.priceOri}}</span></span>
	        		<div class="tip-box"><span v-if="goodData.postFree == 1">包邮</span><span v-if="goodData.couponAmount != 0">券{{goodData.couponAmount}}</span></div>
				</div>
				<div class="weui-cell">{{goodData.promotionDetail}}</div>
				<div class="weui-cell block">
					<h4 class="weui-media-box__title name">说明须知：</h4></br>
					<p>1.点击分享生成海报分享给好友，好友下单成功后，可返佣金积分。</p></br>
					<p>2.如有好友下单成功,可在个人中心佣金记录中查看反佣金状态。</p></br>
					<p>3.返佣金的商品购买，将不会在我的订单中显示商品。</p></br>
					<p>4.如商品收货后退货，则佣金视为无效。</p></br>
				</div>
			</div>
		</div>
	</div>
	
	<poster ref="poster"></poster>
	
	<div class="weui-tabbar">
	    <a href="javascript:;" class="weui-tabbar__item" @click="buy(goodData.url)">
	        <a class="weui-tabbar__label">我买我赚</a>
	    </a>
	    <a href="javascript:;" class="weui-tabbar__item orange" @click="share(goodData)">
	        <p class="weui-tabbar__label">分享</p>
	    </a>
	</div>
</div>
</template>
<script>
import {getFanliItem, clickRecord} from 'src/service/getData'
import poster from './poster'
export default {
  props: {
    gid: ''
  },
  data () {
    return {
      goodData: {},
      isshow: false,
      iframUrl: ''
    }
  },
  mounted () {
    // 控制返回 并重置新路由
    let that = this
    window.history.pushState({}, '', '#/commision')
    window.addEventListener('popstate', e => {
      that.$emit('back', '')
    }, false)
    // 初始化数据
    that.initData()
  },
  components: {
    poster
  },
  methods: {
    async initData () {
      // let gid = this.$route.query.gid
      let res = await getFanliItem(this.gid)
      if (res.code === 0) {
        this.goodData = res.data.item
        this.isshow = true
      }
    },
    share (item) {
      this.$emit('share', item, true)
    },
    async buy (url) {
      await clickRecord('commision', 'buy')
      window.location.href = url
    }
  }
}
</script>
<style scoped>
	.pic-box{height: 3.75rem; overflow: hidden;position: relative;}
	.pic-box img{width: 100%;}
	.pic-box .shadow{position: absolute; width: 100%; height: 100%; bottom: 0; box-shadow: 0px -2px 6px 0px #999 inset;}
	.weui-media-box{padding: 0.11rem; background: #fff;}
	.weui-media-box .ptitle{font-size: 0.16rem; color: #ffa200; margin: 0; }
	.weui-media-box .desc{font-size: 0.12rem;}
	.weui-media-box .name{color: #333; font-size: 0.14rem; white-space: normal;}
	.weui-media-box .prize-box{margin: 0.11rem 0;position: relative;}
	.weui-media-box .pbox-n{color:#ff6f6d;font-size:0.12rem;}
	.weui-media-box .pbox-n .prize{font-size:0.19rem;}
	.weui-media-box .pbox-o{color:#cfcfcf;font-size:0.1rem;text-decoration: line-through;}
	.weui-media-box .pbox-o .prize{font-size:0.14rem;}
	.weui-media-box .tip-box{position: absolute;right:0;font-size:0.11rem;color:#ff7e00;bottom: 0;overflow: auto;}
	.weui-media-box .tip-box span{border: 1px solid #ff7e00; border-radius: 4px; padding: 0 0.02rem; margin-right: 0.05rem; line-height: 0.2rem;}
	.weui-panel{margin-top: 0.05rem;}
	.weui-cell{font-size: 0.12rem; padding: 0.1rem 0; color: #999;}
	.weui-cell.block{padding-bottom:0.48rem;display: block;}
	.weui-cell:before{border-top: 1px dashed #e8e9ec;}
	.weui-tabbar{box-shadow: 0 0 4px 1px #ccc;}
	.weui-tabbar__item{padding:0;background:#ff602a;}
	.weui-tabbar__item.orange{background:#ffa200;}
	.weui-tabbar__label{color: #fff; font-size: 0.16rem; line-height: 0.42rem;}
	.weui-tab__panel{padding-bottom:0.45rem;}
	.weui-tab{position: fixed; width: 100%; top: 0; background: #fff; z-index: 999;}
</style>
